<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
    <title th:text="${title}"></title>
    <link rel="icon" href="/global/img/core-img/favicon.ico">
    <link rel="stylesheet" href="/global/summernote/summernote-bs4.css">
    <link rel="stylesheet" href="/global/video-js/video-js.min.css">
    <link rel="stylesheet" href="/global/css/style.css">
    <link rel="stylesheet" href="/global/css/log.css">
</head>
<body>
<div th:include="public::topbar"></div>
<div id="errinfo" class="alert alert-danger alert-dismissible fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <span>Java script is not running, please check your browser settings and refreshes page</span>
</div>
<div class="container" name="context" th:data-id="${res_id}">
    <div class="row">
        <div class="col-12 mt-4">
            <div class="post-blog-area">
                <div class="row">
                    <div class="col-12">
                        <div class="group">
                            <input id="upload_cover" type="file" accept="image/*" class="hidden">
                            <label for="upload_cover">Select Cover</label>
                            <br/>
                            <div class="single-blog-thumbnail">
                            <img  id="cover_img" th:src="${log.cover}">
                            </div>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="group">
                            <input type="text" name="title" required th:value="${log.title}">
                            <span class="highlight"></span>
                            <span class="bar"></span>
                            <label>Title</label>
                        </div>
                    </div>
                    <div class="col-12 d-flex mb-1">
                        <label class="my-auto ml-auto mr-1 label">Category</label>
                        <select id="select_category">
                            <option th:each="category:${categories}" th:value="${category.desc}"
                                    th:text="${category.desc}"></option>
                        </select>
                        <button type="button" class="btn fa fa-plus" data-toggle="modal"
                                data-target="#addLogType"></button>
                    </div>
                    <div class="col-12 mb-2">
                        <div id="summernote"></div>
                    </div>
                    <div class="col-12 mt-2">
                        <div class="group">
                            <input type="text" name="tag" required th:value="${log.getTagsFormat()}">
                            <span class="highlight"></span>
                            <span class="bar"></span>
                            <label>Tag
                                <small>Separate by ;</small>
                            </label>
                        </div>
                    </div>
                    <br/>
                    <div class="col-12 d-flex">
                        <div class="btn-group ml-auto">
                            <button type="button" class="btn original-btn mr-1" data-toggle="modal"
                                    data-target="#extmodal">
                                Preview
                            </button>
                            <button type="button" class="btn original-btn" data-toggle="modal" data-target="#extmodal">
                                Publish
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:include="public::bottombar"></div>
<div class="subscribe-newsletter-area">
    <div class="modal fade" id="addLogType" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <div class="modal-body">
                    <h5 class="title">Create category</h5>
                    <div class="newsletterForm">
                        <input placeholder="New category here">
                        <button type="button" class="btn original-btn btn-type">Create</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="extmodal" tabindex="-1" data-backdrop="static">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <div class="modal-body">
                    <h5 class="title"></h5>
                    <div class="modal-div"></div>
                    <div class="newsletterForm">
                        <button type="button" class="btn original-btn" id="btn-close">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<input type="hidden" th:value="${log.detail.log}" id="org_log" th:if="${log.detail != null}"/>
<script src="/global/js/jquery-2.2.4.min.js"></script>
<script src="/global/js/jquery.base64.min.js"></script>
<script src="/global/js/popper.min.js"></script>
<script src="/global/bootstrap/js/bootstrap.min.js"></script>
<script src="/global/summernote/summernote-bs4.min.js"></script>
<script src="/global/video-js/video.min.js"></script>
<script src="/global/js-spark-md5/spark-md5.min.js"></script>
<script src="/global/summernote/plugin/summernote-ext-myvideo.min.js"></script>
<script src="/global/summernote/plugin/summernote-ext-myimage.min.js"></script>
<script src="/global/js/logeditor.min.js"></script>
<script src="/global/js/plugins.js"></script>
<script src="/global/js/active.min.js"></script>
<script src="/global/js/events.min.js"></script>
</body>
</html>
